<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <link href="../../static/layui/css/layui.css" rel="stylesheet">
    <script src="../../static/layui/layui.js"></script>
    <style>
        .container {
            padding: 25px;
        }
    </style>
</head>
<body>
<!--行工具栏模板-->
<script type="text/html" id="barDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs layui-bg-red" lay-event="delete">下架</a>
    </div>
</script>

<div class="container">
    <div class="search">
        <form class="layui-form userForm layui-row layui-col-space16">
            <div class="layui-col-md4">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-username"></i>
                    </div>
                    <input type="text" name="pattern" value="" placeholder="请输入房源特征、房型、小区名..." class="layui-input"
                           lay-affix="clear">
                </div>
            </div>
            <div class="layui-col-md4">
                <button class="layui-btn" lay-submit lay-filter="demo-table-search">搜索</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </form>
    </div>

    <table class="layui-hide" id="ID-table-demo-data" lay-filter="user-filter"></table>
</div>
<script>
    layui.use(function () {
        // 获取表格对象
        let table = layui.table,
            form = layui.form,
            $ = layui.$,
            layer = layui.layer;

        // 先拿到username，根据用户姓名去查用户自己发布的房源信息
        let username = sessionStorage.getItem("username");
        // 已知数据渲染
        let inst = table.render({
            elem: '#ID-table-demo-data',
            id:'resource',
            data: {username},
            url: "/house/resource/UserPage",
            toolbar: '#userBar',
            cols: [[ //标题栏
                // {type: 'checkbox', fixed: 'left'},   // 设置复选框
                //field: 需要渲染后台数据的属性名  title  表格的字段名    width ： 设置表格的列宽  sort： 开启排序
                {field: 'houseUsername', title: '发布账号'},
                {field: 'price', title: '价格'},
                {field: 'introduce', title: '介绍'},
                {field: 'communityName', title: '小区名称'},
                {field: 'communityAddress', title: '小区地址'},
                {field: 'pattern', title: '房型'},
                {field: 'size', title: '大小'},
                // {field: 'img', title: '图片',style: 'width: 150px;'},
                {field: 'auditStatus',
                    title: '审核状态',

                    templet: function (row) {
                        if (row.auditStatus === 0) {
                            return '<button type="button" class="layui-btn layui-btn-xs">待审核</button>';
                        } else if (row.auditStatus === 1) {
                            return '<button type="button" class="layui-btn layui-btn-xs layui-btn-normal">已通过</button>';
                        } else if (row.auditStatus === 2) {
                            return '<button type="button" class="layui-btn layui-btn-xs layui-btn-danger">未通过</button>';
                        }
                    }
                },
                {field: 'houseStatus', title: '房屋状态',
                    templet: function (row) {
                        if (row.houseStatus === 1) {
                            return '<button type="button" class="layui-btn layui-btn-xs layui-btn-normal">已出租</button>';
                        } else if (row.houseStatus === 0) {
                            return '<button type="button" class="layui-btn layui-btn-xs layui-btn-danger">未出租</button>';
                        }
                    }
                },//是否出租  出租为1  未出租为0
                {field: 'createTime', title: '创建时间'},
                {fixed: 'right', title: '操作', width: 200, toolbar: '#barDemo'}
            ]],
            // data:[{},{}],    静态数据渲染
            skin: 'line', // 表格风格
            even: true,
            page: true, // 是否显示分页
            limits: [5, 10, 15, 20, 30, 50],
            limit: 5 // 每页默认显示的数量
        });


        form.on('submit(demo-table-search)',function (obj){
            let  searchData = obj.field;
            //  重载表格数据
            table.reload('resource', {
                where: { // 传递数据异步请求时携带的字段
                    pattern:searchData.pattern
                },
                page:{
                    curr:1,
                    limit: 5
                }
            });

            return false;  //关闭默认提交
        })



        // 触发单元格工具事件
        table.on('tool(user-filter)', function (obj) { // 双击 toolDouble
            let data = obj.data; // 获得当前行数据
            if (obj.event === 'delete') {
                let  id = data.id;
                //  发送异步请求

                layer.confirm('您确定要删除选中的记录吗？', {
                    icon: 3,
                    title: '确认删除'
                }, function(index) {
                    $.ajax({
                        url:'/house/resource/delete',
                        data: {id} ,
                        type:"get",
                        dataType:'json',
                        success:function (res){
                            if (res.code==0){  //  删除成功
                                layer.msg(res.message,{icon:1},function (){
                                    // 删除后需要检查当前页的数据数量
                                    var currentPage = table.cache['resource'].length - 1; // 当前页数据减少一个
                                    if (currentPage === 0) {
                                        var current = obj.config.page.curr;
                                        if (current > 1) {
                                            // 如果当前不是第一页且当前页没有数据，则加载上一页
                                            table.reload('resource', {
                                                page: {
                                                    curr: current - 1
                                                }
                                            });
                                        } else {
                                            // 如果是第一页，重新加载当前表格
                                            table.reload('resource');
                                        }
                                    } else {
                                        // 如果当前页还有数据，只重新加载当前页
                                        table.reload('resource');
                                    }
                                });
                            }else{
                                layer.msg(res.message,{icon:2})
                            }
                        }
                    });
                    layer.close(index); // 关闭确认框
                });

            }
        });
    });
</script>

</body>
</html>
